<template>
    <div class="table">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>信息列表-查看详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="container">
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>选择项目分类：</label>
                    </div>
                    <div class="d-right clearfix" style="width:800px">
                        <div class="row">
                          已选择：<span>{{data.category_level1_name}}</span>--<span>{{data.category_level2_name}}</span>
                        </div>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>项目主图：</label>
                    </div>
                    <div class="d-right">
                        <img class="headImg" :src="data.head_img"/>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>项目标题：</label>
                    </div>
                    <div class="d-right">
                        <label>{{data.name}}</label>
                    </div>
                </div>
                <!-- 普通项目显示 -->
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>优惠价：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">{{data.price}}</p>
                    </div>
                </div>
                <!-- 拼团项目显示 -->
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>项目原价：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">{{data.original_price}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>项目类型：</label>
                    </div>
                    <div class="d-right">

                        <p class="introduce" v-show="data.is_collage==1">拼团项目</p>
                        <p class="introduce" v-show="data.is_collage!=1">普通项目</p>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>项目详情：</label>
                    </div>
                    <div class="d-right">
                        <div class="row">
                            <div class="detail-img-box" v-for="(item,index) in detailImgs" :key="index">
                                <img class="detail-img" :src="item"> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-rows clearfix" v-if="iscollage">
                    <div class="d-left">
                        <label>拼团规则：</label>
                    </div>
                    <div class="d-right">
                        <div class="row">
                            <div class="detail-img-box" v-for="(item,index) in collageImgs" :key="index">
                                <img class="detail-img" :src="item"> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>项目说明：</label>
                    </div>
                    <div class="d-right clearfix" >
                        <div class="row">
                            <div class="detail-img-box" v-for="(item,index) in explainImgs" :key="index">
                                <img class="detail-img" :src="item"> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>是否可预约：</label>
                    </div>
                    <div class="d-right clearfix" >
                        <div class="row">
                            <div class="checked-box" v-bind:class="{active: isCheckboxActive }">
                                <div class="checkbox-outer">
                                    <span class="checkbox-inner"></span>
                                    <span class="checkbox-label">是</span>
                                </div>
                            </div>
                           <div class="checked-box" v-bind:class="{active: !isCheckboxActive }">
                                <div class="checkbox-outer">
                                    <span class="checkbox-inner"></span>
                                    <span class="checkbox-label">否</span>
                                </div>
                           </div>
                            
                        </div>
                    </div>
                </div>
                
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>是否是热门项目：</label>
                    </div>
                    <div class="d-right clearfix" >
                        <div class="row">
                            <div class="checked-box" v-bind:class="{active: isCheckboxActive }">
                                <div class="checkbox-outer">
                                    <span class="checkbox-inner"></span>
                                    <span class="checkbox-label">是</span>
                                </div>
                            </div>
                           <div class="checked-box" v-bind:class="{active: !isCheckboxActive }">
                                <div class="checkbox-outer">
                                    <span class="checkbox-inner"></span>
                                    <span class="checkbox-label">否</span>
                                </div>
                           </div>
                            
                        </div>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left d-empty-left">
                       <label></label>
                    </div>
                    <div class="d-right clearfix" >
                        <router-link :to="projectUrl"><el-button type="primary" style="width:250px;">返 回</el-button></router-link>
                    </div>
                </div>
                <div style="height:100px;"></div>
            </div>
        </div>
</template>
<script>
import axios from "axios";
export default {
    name:"detail",
    data (){
        return{
            id:'',//项目id
            detailImgs:[],//详情图集
            explainImgs:[],//说明图集
            collageImgs:[],//拼团规则图集
            iscollage:false,//是否为拼团项目，默认false
            isCheckboxActive:false,//是否可预约，默认false
            is_hot:false,//是否是热门项目：0否，1是
            projectUrl:'/project',//0 从总部项目列表过来 1 从门店项目列表过来
            data:[]
        }
    },
    created (){
        this.id = this.$route.params.id;
        //console.log(this.id);
        this.getDetailsData();
    },
    mounted: function () {
        this.$nextTick(function () {
            // Code that will run only after the
            // entire view has been rendered
            if(this.$route.query.branch){
                this.projectUrl ="/branch/project";
            }
        })
    },
    methods:{
         //获取项目详情data数据
        getDetailsData(){

            axios
                .get('/manage/item/detail',{
                    params:{
                        id:this.id
                    }
                })
                .then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        let data = response.data.data;
                        console.log(data)
                        this.data = data;
                       
                       if(data.is_collage == 1){//拼团项目
                            this.iscollage = true;
                            this.collageImgs = JSON.parse(data.item_rule);
                        }else{
                            this.iscollage = false;
                        }

                        if(data.is_reservation == 0){//是否预约
                           this.isCheckboxActive = false; 
                        }else{
                            this.isCheckboxActive = true; 
                        }

                        if(data.is_hot == 0){//是否热门
                           this.is_hot = false; 
                        }else{
                            this.is_hot = true; 
                        }
                     
                        this.detailImgs = JSON.parse(data.detail);
                      
                        this.explainImgs = JSON.parse(data.item_explain);
                    
                    }else{
                        console.log(response.data.msg)  
                    }
                })
                .catch(error=>{
                    console.log(error); 
                });
        },
      
    }
}
</script>
<style lang="stylus" scoped>
    .content-rows{
        margin-bottom:15px;
        .d-left{
            float :left;
            width :120px;
            text-align:right
            &.d-empty-left{
                height :45px;
            } 
        }
        .d-right{
            float :left ;
            padding-left 20px;
            .headImg{
                width :250px;
                height :150px;
            }
            .introduce{
            
                line-height :20px;
            }
            .row{
                padding 0px 0px 10px 0px
            }
            .detail-img-box{
                float :left;
                margin-right :10px;
                margin-bottom :10px;
               .detail-img{
                 width :250px;
                 height :auto; 
               } 
            }
            .checked-box{
                position :relative;
                display:inline-block;
                margin-right :22px;
                .checkbox-outer{
                    .checkbox-inner{
                        float :left;
                        position: relative;
                        border: 1px solid #dcdfe6;
                        border-radius: 2px;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        width: 15px;
                        height: 15px;
                        background-color: #f5f7fa;;
                        z-index: 1;
                    } 
                    .checkbox-label{
                        float :left;
                        padding-left: 10px;
                        line-height: 15px;
                        font-size: 13px;
                    } 
                }
                &.active{
                    .checkbox-outer{
                        .checkbox-inner{
                            background-color: #409EFF;
                            border-color: #409EFF;
                        }
                        .checkbox-inner::after{
                            -webkit-box-sizing: content-box;
                            box-sizing: content-box;
                            content: "";
                            border: 1px solid #fff;
                            border-left: 0;
                            border-top: 0;
                            height: 7px;
                            left: 4px;
                            position: absolute;
                            top: 1px;
                            -webkit-transform: rotate(45deg) scaleY(0);
                            -ms-transform: rotate(45deg) scaleY(0);
                            transform: rotate(45deg) scaleY(1);
                            width: 3px;
                        }
                        .checkbox-label{
                            color: #409EFF;
                        }
                    }
                   
                }
            }
        }
    }
</style>


